<template>
	<view class="container" v-if="showPage">
		<template v-if="!isEmpty">
			<view class="player">
				<video class="video" id="myVideo" object-fit="fill" :controls="true" :show-fullscreen-btn="false"
					:autoplay="true" :poster="poster" :src="src" @timeupdate="timeUpdate" @ended="videoEnded"
					@fullscreenchange="fullscreenchange" @controlstoggle="controlstoggle" @error="videoErrorCallback" :danmu-list="barrageList"
					enable-danmu danmu-btn>
				</video>
			</view>


			<u-popup :show="show" @close="onClose" :customStyle="{marginBottom:'30rpx'}" :overlayOpacity="0" bgColor="transparent" mode="right">
				<view class="send-box">
					<view class="close" @click="onClose">
						<u-icon name="close-circle" color="#fff" size="28"></u-icon>
					</view>
					<u--textarea v-model="barrageValue" placeholder="弹个幕，交流一下~" @blur="bindInputBlur"></u--textarea>
					<view class="send-btn">
						<u-button type="primary" @tap="bindSendDanmu" text="发送" color="#54ec42"></u-button>
					</view>
				</view>
			</u-popup>
			<view class="open-btn" :style="'top:'+navHeight" @click="handleClickOpen" v-if="showToolbar">互动</view>
			<view class="toolbar" v-if="showToolbar">
				<view class="go-back" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="28"  labelSize="14"></u-icon>
				</view>
			</view>
		</template>
		<template v-if="isEmpty">
			<view class="toolbar">
				<view class="go-back" @click="goBack">
					<u-icon name="arrow-left" color="#fff" size="28"  labelSize="14"></u-icon>
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</template>
		<!--跳转确认弹窗-->
		<popup-view v-if="showPopup" content='视频课程已学完,前往课后习题' @onConfirm="onConfirm" @onCancel="onCancel">
		</popup-view>
	</view>
</template>

<script>
	import PopupView from '@/pages/components/PopupView.vue'
	export default {
		components:{
			PopupView
		},
		data() {
			return {
				option: {},
				src: '',
				barrageList: [],
				barrageValue: '',
				currentTime: "",
				courseQuestionId: '',
				poster: '',
				show: null,
				isEmpty: false,
				showPage: false,
				showToolbar:false,
				timer:null,
				navHeight:0,
				showPopup:false
			}
		},
		onShareAppMessage(res) {
			return this.$utils.onShareAppMessage();
		},
		onLoad(option) {
			this.option = option;
			uni.setKeepScreenOn({
				keepScreenOn: true
			});
			let menuButtonObject = uni.getMenuButtonBoundingClientRect();
			this.navHeight = (menuButtonObject.top + menuButtonObject.height + 10) + 'rpx';
			this.getData();
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
			//this.videoContext.requestFullScreen();
		},
		methods: {
			async getData() {
				const res = await this.$http.get(
					`/wechatmini/course-questions?course_question_set_id=${this.option.id}&question_category=${ this.option.type }`
				)
				if(!res.data.video){
					this.isEmpty = true;
					this.showPage = true;
					return false;
				}
				uni.setPageOrientation();
				this.src = res.data.video.url;
				this.poster = `${res.data.video.url}?vframe/jpg/offset/1`;
				this.barrageList = res.data.video.barrage_list;
				this.courseQuestionId = res.data.video.course_question_id;
				this.isEmpty = false;
				this.showPage = true;
			},
			videoErrorCallback(err) {
				console.log(err)
			},
			async videoEnded() {
				let res = await this.$http.post(
					`/wechatmini/course-question-set/${ this.option.id }/finish/${ this.option.type }`)
				this.showPopup = true;
			},
			goBack() {
				uni.navigateBack()
			},
			bindInputBlur(e) {
				if (e) {
					this.barrageValue = e.detail.value
				}
			},
			bindButtonTap() {
				var that = this
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					camera: ['front', 'back'],
					success: function(res) {
						this.src = res.tempFilePath
					}
				})
			},
			bindSendDanmu() {
				let self = this;
				
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					self.videoContext.sendDanmu({
						text: self.barrageValue,
						color: self.getRandomColor()
					})
					self.sendBarrage()
				},300)
				

			},
			timeUpdate(event) {
				this.currentTime = event.detail.currentTime
			},
			fullscreenchange() {
				this.show = true
			},
			async sendBarrage() {
				if (this.currentTime == "") {
					return;
				}
				let res = await this.$http.post(`/wechatmini/course-question/barrage`, {
					question_id: this.courseQuestionId,
					text: this.barrageValue,
					time: this.currentTime
				});
				this.barrageValue = "";
				this.onClose();
			},
			getRandomColor() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			handleClickOpen() {
				this.show = true;
				this.videoContext.pause();
			},
			controlstoggle(event){
				this.showToolbar = event.detail.show
			},
			onClose() {
				this.show = false;
				this.videoContext.play();
			},
			onConfirm(){
				uni.redirectTo({
					url: `/pages/answer/index?source=1&type=3&id=${ this.option.id }`
				})
			},
			onCancel(){
				this.showPopup = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		width: 100%;
		height: 100%;
		background: linear-gradient(#62995a, #405f3d);
	}

	.player {
		position: relative;
		height: 100%;

		.video {
			position: relative;
			z-index: 0;
			width: 100%;
			height:100%;
		}

	}

	.toolbar {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;

		.go-back {
			margin-top: 20rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.open-btn {
		position: absolute;
		right: 20rpx;
		background-color: #54ec42;
		width: 40rpx;
		height: 40rpx;
		color: #4f794a;
		text-align: center;
		line-height: 40rpx;
		border-radius: 50%;
		opacity: 0.5;
		font-size: 16rpx;
		z-index: 999;
	}

	.send-box {
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 20rpx;
		z-index: 20;
		width: 40vw;

		.close {
			position: absolute;
			top: -30rpx;
			right: 0;
			opacity: 0.7;
		}

		.send-btn {
			margin-top: 10rpx
		}
	}
</style>
